<template>
  <div class="login-container">
    <div>
      <el-form ref="form" :model="form" label-width="80px" class="login-form">
        <h2 class="login-title">欢迎登录供应商系统</h2>
        <i class="el-icon-user-solid"></i>
        <el-form-item label="用户名" icon="el-icon-user-solid">
          <el-input v-model="loginUserName"></el-input>
        </el-form-item>
        <i class="el-icon-key" style=""></i>
        <el-form-item label="密码" icon="el-icon-key">
          <el-input v-model="loginUserPwd" show-password></el-input>
        </el-form-item>
        <el-form-item label="验证码" icon="el-icon-key">
          <el-input v-model="passCode"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="float:right" class="code" @click="createAuth()">{{ code }}</el-button>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="onSubmit" class="loginButton">登录</el-button>
        </el-form-item>
        <el-form-item>
          <el-link type="primary" style="float: right;margin-left: 10px" :underline="true" @click="register">注册
          </el-link>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog
        :title="title"
        :visible.sync="show"
        width="80%"
        center>
      <el-form ref="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="userName"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="passWord" show-password></el-input>
        </el-form-item>
        <el-form-item label="确定密码">
          <el-input v-model="repeatPassWord" show-password></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="userTel"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input v-model="userEmail"></el-input>
        </el-form-item>
        <el-form-item label="验证码" icon="el-icon-key">
          <el-input v-model="passCode"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="float:right" class="code" @click="createAuth()">{{ code }}</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="mini" style="float: right;margin-left: 10px" @click="close">取消</el-button>
      <el-button type="primary" size="mini" style="float: right;margin-left: 10px" @click="registerConfirm">注册
      </el-button>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      userTel: '',
      sex: '',
      loginUserName: '',
      loginUserPwd:'',
      title: '注册用户',
      userName: '',
      passWord: '',
      repeatPassWord:'',
      userEmail:'',
      birthDate: '',
      userPhoneNum: '',
      show: false,
      radio: '1',
      role: '',
      education: '',
      dept: '',
      imageUrl: '',
      HeaderImg: '',
      passCode: '',
      code: '',
      form: {
        username: "",
        password: ""
      },
    }
  },
  mounted() {
    this.createAuth();
  },
  methods: {
    onSubmit() {
      if (this.loginUserName == '') {
        this.$message({
          message: '用户名必填',
          type: 'warning'
        });
        return
      }
      if (this.loginUserPwd == '') {
        this.$message({
          message: '密码必填',
          type: 'warning'
        });
        return
      }
      if (this.passCode == '') {
        this.$message({
          message: '验证码必填',
          type: 'warning',
        });
        return
      }
      this.passCode = this.passCode.toUpperCase()
      if (this.passCode != this.code) {
        this.$message.info("验证码错误");
        this.createAuth();
        return;
      }

      this.loginUserName = this.loginUserName.toLowerCase()
      let form = new FormData()
      form.append("uLoginName", this.loginUserName)
      form.append("uPassword", this.loginUserPwd)
      this.$axios.post("api/userLogin/", form).then(
          r => {
            this.$store.state.username = r.data.data
            let supplierId = r.headers.supplierid
            if (r.data.code === 1 ) {
              this.$message.success("登录成功")
              if (supplierId != null){
                localStorage.setItem("supplierId", supplierId)
              }

              // this.$store.state.nameStr = r.data.data
              // this.$router.push({name:"Home",params:{state:'1'}})
              // localStorage.setItem("state",'1')
              this.$router.push("Home")
            } else if(r.data.code === 2){
              this.$message.success("登录成功")
              if (supplierId != null){
                localStorage.setItem("supplierId", supplierId)
                this.$router.push("examineAndVerify")
              }else {
                this.$router.push("RegisteredSupplierEntry")
              }


              // this.$router.push({name:"Home",params:{state:'2'}})
              // localStorage.setItem("state",'2')
            } else if (r.data.code === 14) {
              this.$message.error("登录失败,用户名或密码有误")
            } else {
              this.$message.error("登录失败")
            }


          }
      )
    },
    createAuth() {
      localStorage.removeItem("supplierId")
      this.code = '';
      let codeLength = 4;
      let checkCode = document.getElementById("code");
      let random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
          'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
      for (let i = 0; i < codeLength; i++) {
        let index = Math.floor(Math.random() * 36);
        this.code += random[index];
      }
    },
    register() {
      this.show = true
      this.passCode =''
    },
    registerConfirm() {
      if (this.userName == '') {
        this.$message({
          message: '用户名必填',
          type: 'warning'
        });
        return
      }
      if (this.passWord == '') {
        this.$message({
          message: '密码必填',
          type: 'warning'
        });
        return
      }
      if (this.repeatPassWord == '') {
        this.$message({
          message: '请确认密码',
          type: 'warning'
        });
        return
      }
      if (this.userTel == '' && this.userEmail == '') {
        this.$message({
          message: '手机号和邮箱号至少填一个',
          type: 'warning'
        });
        return
      }
      if (this.userEmail != ''){
        var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        if (!regEmail.test(this.userEmail)){
          this.$message({
            message: '邮箱号格式不正确',
            type: 'warning'
          });
          return;
        }
      }
      if (this.userTel != ''){
        var regTel = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
        if (!regTel.test(this.userTel)){
          this.$message({
            message: '电话号码格式不正确',
            type: 'warning'
          });
          return;
        }
      }
      if (this.passCode == '') {
        this.$message({
          message: '验证码必填',
          type: 'warning'
        });
        return
      }
      if (this.passCode != this.code) {
        this.$message.info("验证码错误");
        this.createAuth();
        return;
      }
      this.userName = this.userName.toLowerCase()
      let fd = new FormData()
      fd.append("uLoginName", this.userName)
      fd.append("uPassword", this.passWord)
      fd.append("repeatPassWord",this.repeatPassWord)
      fd.append("uTel", this.userTel)
      fd.append("uEmail",this.userEmail)
      this.$axios.post("api/userAddLogin", fd).then(
          r => {
            if (r.data.code == 200) {
              this.$message({
                message: '注册成功',
                type: 'success',
              });
              this.userName = ''
              this.show = false
            } else if (r.data.code == 500) {
              this.$message({
                message: '用户名重复,注册失败',
                type: 'error'
              });
            } else if (r.data.code == 550) {
              this.$message({
                message: '两次密码输入不一致,注册失败',
                type: 'error'
              });
            }else if (r.data.code == 555){
              this.$message({
                message: '手机号和邮箱号至少填一个',
                type: 'error'
              });
            }else {
              this.$message({
                message: '注册失败',
                type: 'error'
              });
            }
          }
      )
      this.passCode = ''
    },
    close() {
      this.show = false
    },
  }
}
</script>

<style scoped>
.login-form {
  width: 350px;
  margin: 300px auto; /* 上下间距160px，左右自动居中*/
  background-color: rgb(255, 255, 255); /* 透明背景色 */
  padding: 30px;
  border-radius: 20px; /* 圆角 */
}

/* 背景 */
.login-container {
  position: absolute;
  width: 100%;
  height: 115%;
  background: url("../img/login1.jpg");
}

/* 标题 */
.login-title {
  color: #303133;
  text-align: center;
}

.loginButton {
  align: center;
  width: 270px;
}

.code {
  font-family: Arial;
  font-style: oblique;
  font-weight: bold;
  border: 0;
  letter-spacing: 10px;
  color: rgb(0, 204, 255);
  height: 40px;
  background-color: rgb(228, 127, 68);
}
</style>